<template>
	<view class="sharePosters">
		<uni-popup ref="sharePosters" @maskClick="close">
			<view class="sharePosters-popup">
				<l-painter
					css="width: 650rpx; padding-bottom: 20rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)"
					@fail="fail" @done="done" pathType="url" ref="poster" performance>
					<!-- <l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
					<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
						<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
					</l-painter-view> -->
					<l-painter-view
						css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 570rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
						<!-- 海报图片 -->
						<l-painter-image :src="painterImage"
							css="object-fit: cover; object-position: 50% 50%; width: 506rpx; height: 606rpx;" />
						<!-- 商品价格 -->
						<block v-if="productId">
							<l-painter-view
								css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
								<!-- <l-painter-text text="￥" css="vertical-align: bottom" /> -->
								<l-painter-text :text="painterTextPrice  | Money"
									css="vertical-align: bottom; font-size: 58rpx" />
								<!-- <l-painter-text text=".39" css="vertical-align: bottom" />
								<l-painter-text text="￥59.99"
									css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999" /> -->
							</l-painter-view>
						</block>
						<!-- 标签、描述、二维码 -->
						<l-painter-view css="margin-top: 30rpx; display: flex">
							<l-painter-text uid="tag"
								css="position:absolute; top: 6rpx; padding: 5rpx 10rpx; color: #212121; background: #ffb400; font-size: 24rpx"
								:text="painterTextLabel"></l-painter-text>
							<l-painter-text
								css="text-indent: calc(tag.width + 10rpx); flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;"
								:text="painterTextDescription"></l-painter-text>
							<l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="qrcode"></l-painter-qrcode>
						</l-painter-view>
					</l-painter-view>
				</l-painter>
				<PopularizeShare title="分享邀请" @popularize:select="popularizeSelect"></PopularizeShare>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import Constants from '@/constants';
	import PopularizeShare from '@/pages/components/share/popup-popularize-share.vue';
	//
	export default {
		//
		name: 'sharePosters',
		//
		components: {
			PopularizeShare
		},
		//
		mixins: [Constants],
		//
		props: {
			//分享图片
			painterImage: {
				Type: String,
				default: ''
			},
			//分享价格
			painterTextPrice: {
				Type: String,
				default: ''
			},
			//分享划线价格
			painterTextDashedPrice: {
				Type: String,
				default: ''
			},
			//分享标签
			painterTextLabel: {
				Type: String,
				default: ''
			},
			//分享描述
			painterTextDescription: {
				Type: String,
				default: ''
			},
			//分享Id
			shareId: {
				Type: String,
				default: ''
			},
			//分享类型
			shareType: {
				Type: String,
				default: ''
			},
			//商品Id
			productId: {
				Type: String,
				default: ''
			},
			//跳转页面
			targetPage: {
				type: String,
				default: ''
			}
		},
		computed: {
			//二维码
			qrcode() {
				let shareId = this.shareId;
				let shareType = this.shareType;
				let productId = this.productId;
				let targetPage = this.targetPage;
				let code = JSON.stringify({
					shareId,
					shareType,
					productId,
					targetPage
				});
				console.log('【sharePosters：qrcode，生成的二维码是】:', code)
				return code;
			}
		},
		// data() {
		// 	return {
		// 		qrcode:{}
		// 	};
		// },
		//
		watch: {
			//监听是否显示弹出层
			shareId(newVal, oldValue) {
				let that = this;
				if (newVal) {
					that.open('bottom');
				}
			},
		},
		methods: {
			//
			open(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.sharePosters.open(type)
			},
			//
			close() {
				this.$emit('update:showSharePosters', false);
			},
			//
			popularizeSelect(item) {
				console.log('item:--------------- ', item);
				if (item.item.text == '微信分享') {
					// console.log('item:--------------- ', item.text);
					this.share();
				}
				if (item.item.text == '生成海报') {
					this.save();
				}


			},
			//
			fail(v) {
				console.log(v)
			},
			//
			done(v) {
				console.log('绘制完成:')
			},
			//
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						// console.log(res.tempFilePath)
						this.picture = res.tempFilePath
						this.saveImage()
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},
			//保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.picture,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			},
			//
			share() {
				// #ifndef H5
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 1,
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
				// #endif
			}
		}
	};
</script>
<style lang="scss" scoped>
	.sharePosters {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;

		.sharePosters-popup {
			position: relative;
			height: 80vh;
			padding: 16rpx 50rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-regular;
			z-index: 100;
			background-color: $uni-bg-color;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
	}
</style>